<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    
    .app-container {
      max-width: 100%;
      margin: 0 auto;
      min-height: 100vh;
      position: relative;
    }
    
    .app-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      height: 44px;
      background-color: #1890ff;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 0 16px;
      z-index: 10;
      justify-content: space-between;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 500;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
    }
    
    .header-action {
      padding: 6px;
      color: #fff;
      font-size: 18px;
    }
    
    .profile-card {
      background: linear-gradient(135deg, #1890ff, #096dd9);
      border-radius: 12px;
      padding: 16px;
      margin: 16px;
      color: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .profile-info {
      display: flex;
      align-items: center;
    }
    
    .profile-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.8);
      overflow: hidden;
      background-color: #fff;
    }
    
    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .profile-details {
      margin-left: 12px;
      flex: 1;
    }
    
    .profile-name {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .profile-position {
      font-size: 14px;
      opacity: 0.9;
    }
    
    .profile-department {
      font-size: 12px;
      opacity: 0.8;
    }
    
    .profile-stats {
      display: flex;
      margin-top: 12px;
      justify-content: space-between;
    }
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 12px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      flex: 1;
      margin: 0 4px;
    }
    
    .stat-value {
      font-size: 16px;
      font-weight: 500;
    }
    
    .stat-label {
      font-size: 12px;
      opacity: 0.9;
    }
    
    .quick-tools {
      margin: 16px;
      background-color: #fff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
      color: #333;
    }
    
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    
    .tool-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: inherit;
    }
    
    .tool-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }
    
    .tool-icon i {
      font-size: 20px;
      color: white;
    }
    
    .tool-label {
      font-size: 12px;
      color: #333;
      text-align: center;
    }
    
    .content-tabs {
      margin: 16px;
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .tab-nav {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .tab-nav-item {
      flex: 1;
      text-align: center;
      padding: 14px 12px;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      border-bottom: 2px solid transparent;
      transition: all 0.3s;
    }
    
    .tab-nav-item.active {
      color: #1890ff;
      border-bottom-color: #1890ff;
    }
    
    .tab-content {
      padding: 16px;
    }
    
    .module-section {
      margin-bottom: 20px;
    }
    
    .module-section:last-child {
      margin-bottom: 0;
    }
    
    .module-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }
    
    .module-title i {
      margin-right: 8px;
      color: #1890ff;
    }
    
    .module-content {
      background-color: #f9f9f9;
      border-radius: 8px;
      padding: 12px;
    }
    
    .module-menu {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    
    .menu-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      background-color: #fff;
      border-radius: 8px;
      text-decoration: none;
      color: #333;
    }
    
    .menu-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }
    
    .menu-icon i {
      color: #fff;
      font-size: 18px;
    }
    
    .menu-name {
      font-size: 12px;
      text-align: center;
    }
    
    .list-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .list-item:last-child {
      margin-bottom: 0;
    }
    
    .list-item-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .list-item-icon i {
      color: #fff;
      font-size: 16px;
    }
    
    .list-item-content {
      flex: 1;
    }
    
    .list-item-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .list-item-desc {
      font-size: 12px;
      color: #666;
    }
    
    .list-item-right {
      margin-left: 8px;
      color: #999;
      font-size: 18px;
    }
    
    .notification-bar {
      margin: 16px;
      background-color: #fff7e6;
      border: 1px solid #ffe7ba;
      border-radius: 8px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
    }
    
    .notification-icon {
      color: #fa8c16;
      font-size: 18px;
      margin-right: 10px;
    }
    
    .notification-content {
      flex: 1;
      font-size: 13px;
      color: #333;
    }
    
    .notification-action {
      color: #1890ff;
      font-size: 13px;
      margin-left: 10px;
    }
    
    .bg-blue { background-color: #1890ff; }
    .bg-green { background-color: #52c41a; }
    .bg-orange { background-color: #fa8c16; }
    .bg-purple { background-color: #722ed1; }
    .bg-cyan { background-color: #13c2c2; }
    .bg-yellow { background-color: #faad14; }
    .bg-red { background-color: #f5222d; }
    .bg-magenta { background-color: #eb2f96; }
    
    .todo-section {
      margin: 16px;
    }
    
    .todo-item {
      background-color: #fff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .todo-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .todo-title {
      font-size: 15px;
      font-weight: 500;
      color: #333;
    }
    
    .todo-status {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 10px;
      color: #fff;
    }
    
    .status-pending {
      background-color: #faad14;
    }
    
    .status-approved {
      background-color: #52c41a;
    }
    
    .status-rejected {
      background-color: #f5222d;
    }
    
    .todo-content {
      display: flex;
      margin-bottom: 10px;
    }
    
    .todo-label {
      min-width: 70px;
      font-size: 13px;
      color: #666;
    }
    
    .todo-value {
      flex: 1;
      font-size: 13px;
      color: #333;
    }
    
    .todo-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }
    
    .todo-btn {
      padding: 6px 12px;
      border-radius: 4px;
      margin-left: 8px;
      font-size: 13px;
    }
    
    .btn-primary {
      background-color: #1890ff;
      color: #fff;
      border: none;
    }
    
    .btn-secondary {
      background-color: #f0f0f0;
      color: #333;
      border: none;
    }
    
    .hidden {
      display: none;
    }
    
    .dot-indicator {
      display: flex;
      justify-content: center;
      margin: 12px 0;
    }
    
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #ddd;
      margin: 0 4px;
    }
    
    .dot.active {
      background-color: #1890ff;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 头部 -->
    <div class="app-header">
      <div class="header-title">H+移动工作平台</div>
      <div class="header-actions">
        <div class="header-action">
          <i class="fas fa-bell"></i>
        </div>
        <div class="header-action">
          <i class="fas fa-search"></i>
        </div>
      </div>
    </div>
    
    <!-- 通知栏 -->
    <div class="notification-bar">
      <div class="notification-icon">
        <i class="fas fa-bullhorn"></i>
      </div>
      <div class="notification-content">
        您有 3 个待办事项需要处理，1 个报销申请待审批
      </div>
      <div class="notification-action">
        查看
      </div>
    </div>
    
    <!-- 个人信息卡片 -->
    <div class="profile-card">
      <div class="profile-info">
        <div class="profile-avatar">
          <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="头像">
        </div>
        <div class="profile-details">
          <div class="profile-name">张医生</div>
          <div class="profile-position">主治医师</div>
          <div class="profile-department">神经外科</div>
        </div>
      </div>
      <div class="profile-stats">
        <div class="stat-item">
          <div class="stat-value">12</div>
          <div class="stat-label">待办</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">5</div>
          <div class="stat-label">资产</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">3</div>
          <div class="stat-label">申请</div>
        </div>
      </div>
    </div>
    
    <!-- 快捷工具 -->
    <div class="quick-tools">
      <div class="section-title">快捷工具</div>
      <div class="tools-grid">
        <div class="tool-item">
          <div class="tool-icon bg-blue">
            <i class="fas fa-id-card"></i>
          </div>
          <div class="tool-label">我的档案</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-green">
            <i class="fas fa-money-bill-wave"></i>
          </div>
          <div class="tool-label">薪资查询</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-orange">
            <i class="fas fa-laptop"></i>
          </div>
          <div class="tool-label">我的资产</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-purple">
            <i class="fas fa-file-invoice"></i>
          </div>
          <div class="tool-label">资产领用</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-cyan">
            <i class="fas fa-receipt"></i>
          </div>
          <div class="tool-label">移动报账</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-yellow">
            <i class="fas fa-plane"></i>
          </div>
          <div class="tool-label">出差申请</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-red">
            <i class="fas fa-box"></i>
          </div>
          <div class="tool-label">物资申领</div>
        </div>
        <div class="tool-item">
          <div class="tool-icon bg-magenta">
            <i class="fas fa-tasks"></i>
          </div>
          <div class="tool-label">更多</div>
        </div>
      </div>
    </div>
    
    <!-- 待办事项区域 -->
    <div class="todo-section">
      <div class="section-title">待办事项</div>
      <div class="todo-item">
        <div class="todo-header">
          <div class="todo-title">资产维修申请</div>
          <div class="todo-status status-pending">待审批</div>
        </div>
        <div class="todo-content">
          <div class="todo-label">申请人：</div>
          <div class="todo-value">李四</div>
        </div>
        <div class="todo-content">
          <div class="todo-label">资产名称：</div>
          <div class="todo-value">Dell笔记本电脑</div>
        </div>
        <div class="todo-content">
          <div class="todo-label">申请日期：</div>
          <div class="todo-value">2024-05-10</div>
        </div>
        <div class="todo-actions">
          <button class="todo-btn btn-secondary">拒绝</button>
          <button class="todo-btn btn-primary">同意</button>
        </div>
      </div>
      
      <div class="todo-item">
        <div class="todo-header">
          <div class="todo-title">差旅费报销</div>
          <div class="todo-status status-pending">待提交</div>
        </div>
        <div class="todo-content">
          <div class="todo-label">出差地点：</div>
          <div class="todo-value">上海</div>
        </div>
        <div class="todo-content">
          <div class="todo-label">出差时间：</div>
          <div class="todo-value">2024-05-05 至 2024-05-08</div>
        </div>
        <div class="todo-actions">
          <button class="todo-btn btn-primary">继续填写</button>
        </div>
      </div>
    </div>
    
    <!-- 内容选项卡区域 -->
    <div class="content-tabs">
      <div class="tab-nav">
        <div class="tab-nav-item active" data-tab="tab-asset">资产</div>
        <div class="tab-nav-item" data-tab="tab-finance">财务</div>
        <div class="tab-nav-item" data-tab="tab-material">物资</div>
        <div class="tab-nav-item" data-tab="tab-profile">个人</div>
      </div>
      
      <!-- 资产模块 -->
      <div class="tab-content" id="tab-asset">
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-laptop"></i>资产管理
          </div>
          <div class="module-content">
            <div class="module-menu">
              <div class="menu-button">
                <div class="menu-icon bg-blue">
                  <i class="fas fa-laptop"></i>
                </div>
                <div class="menu-name">我的资产</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-green">
                  <i class="fas fa-file-invoice"></i>
                </div>
                <div class="menu-name">资产领用</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-orange">
                  <i class="fas fa-trash-alt"></i>
                </div>
                <div class="menu-name">资产处置</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-purple">
                  <i class="fas fa-clipboard-list"></i>
                </div>
                <div class="menu-name">资产盘点</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-cyan">
                  <i class="fas fa-exchange-alt"></i>
                </div>
                <div class="menu-name">资产调拨</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-yellow">
                  <i class="fas fa-tools"></i>
                </div>
                <div class="menu-name">资产维修</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-laptop"></i>我的资产列表
          </div>
          <div class="module-content">
            <div class="list-item">
              <div class="list-item-icon bg-blue">
                <i class="fas fa-laptop"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">Dell XPS笔记本电脑</div>
                <div class="list-item-desc">资产编号: A3892, 状态: 正常使用</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-green">
                <i class="fas fa-mobile-alt"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">iPhone 13 Pro</div>
                <div class="list-item-desc">资产编号: A4021, 状态: 正常使用</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-purple">
                <i class="fas fa-print"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">HP LaserJet打印机</div>
                <div class="list-item-desc">资产编号: A2578, 状态: 维修中</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 财务模块 -->
      <div class="tab-content hidden" id="tab-finance">
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-wallet"></i>财务管理
          </div>
          <div class="module-content">
            <div class="module-menu">
              <div class="menu-button">
                <div class="menu-icon bg-blue">
                  <i class="fas fa-credit-card"></i>
                </div>
                <div class="menu-name">费用报销</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-green">
                  <i class="fas fa-money-bill-wave"></i>
                </div>
                <div class="menu-name">工资查询</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-orange">
                  <i class="fas fa-file-invoice"></i>
                </div>
                <div class="menu-name">发票管理</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-purple">
                  <i class="fas fa-chart-pie"></i>
                </div>
                <div class="menu-name">预算管理</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-cyan">
                  <i class="fas fa-plane"></i>
                </div>
                <div class="menu-name">出差申请</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-yellow">
                  <i class="fas fa-chart-line"></i>
                </div>
                <div class="menu-name">财务报表</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-money-bill-wave"></i>我的薪资
          </div>
          <div class="module-content">
            <div class="list-item">
              <div class="list-item-icon bg-green">
                <i class="fas fa-money-bill-wave"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">2024年5月薪资</div>
                <div class="list-item-desc">23,600.00元 (发放日期: 2024-06-05)</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-green">
                <i class="fas fa-money-bill-wave"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">2024年4月薪资</div>
                <div class="list-item-desc">23,600.00元 (已发放)</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-green">
                <i class="fas fa-money-bill-wave"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">2024年3月薪资</div>
                <div class="list-item-desc">25,800.00元 (已发放)</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 物资模块 -->
      <div class="tab-content hidden" id="tab-material">
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-box"></i>物资管理
          </div>
          <div class="module-content">
            <div class="module-menu">
              <div class="menu-button">
                <div class="menu-icon bg-blue">
                  <i class="fas fa-boxes"></i>
                </div>
                <div class="menu-name">物资列表</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-green">
                  <i class="fas fa-clipboard-list"></i>
                </div>
                <div class="menu-name">物资申领</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-orange">
                  <i class="fas fa-sign-in-alt"></i>
                </div>
                <div class="menu-name">物资入库</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-purple">
                  <i class="fas fa-sign-out-alt"></i>
                </div>
                <div class="menu-name">物资出库</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-cyan">
                  <i class="fas fa-exchange-alt"></i>
                </div>
                <div class="menu-name">物资调拨</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-yellow">
                  <i class="fas fa-tasks"></i>
                </div>
                <div class="menu-name">盘点管理</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-clipboard-list"></i>我的物资申领
          </div>
          <div class="module-content">
            <div class="list-item">
              <div class="list-item-icon bg-blue">
                <i class="fas fa-clipboard-list"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">办公用品申领</div>
                <div class="list-item-desc">申请日期: 2024-05-11, 状态: 审批中</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-green">
                <i class="fas fa-clipboard-list"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">医疗耗材申领</div>
                <div class="list-item-desc">申请日期: 2024-05-01, 状态: 已发放</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-orange">
                <i class="fas fa-clipboard-list"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">检验试剂申领</div>
                <div class="list-item-desc">申请日期: 2024-04-23, 状态: 已发放</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 个人模块 -->
      <div class="tab-content hidden" id="tab-profile">
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-user"></i>个人服务
          </div>
          <div class="module-content">
            <div class="module-menu">
              <div class="menu-button">
                <div class="menu-icon bg-blue">
                  <i class="fas fa-user"></i>
                </div>
                <div class="menu-name">个人资料</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-green">
                  <i class="fas fa-clipboard-list"></i>
                </div>
                <div class="menu-name">我的申请</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-orange">
                  <i class="fas fa-tasks"></i>
                </div>
                <div class="menu-name">待我审批</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-purple">
                  <i class="fas fa-calendar-alt"></i>
                </div>
                <div class="menu-name">排班信息</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-cyan">
                  <i class="fas fa-chart-bar"></i>
                </div>
                <div class="menu-name">运营报表</div>
              </div>
              <div class="menu-button">
                <div class="menu-icon bg-yellow">
                  <i class="fas fa-cog"></i>
                </div>
                <div class="menu-name">系统设置</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="module-section">
          <div class="module-title">
            <i class="fas fa-user"></i>个人信息
          </div>
          <div class="module-content">
            <div class="list-item">
              <div class="list-item-icon bg-blue">
                <i class="fas fa-id-card"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">个人资料</div>
                <div class="list-item-desc">查看和修改个人基本信息</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-cyan">
                <i class="fas fa-file-alt"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">我的差旅费标准</div>
                <div class="list-item-desc">查看个人出差费用标准</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="list-item">
              <div class="list-item-icon bg-purple">
                <i class="fas fa-question-circle"></i>
              </div>
              <div class="list-item-content">
                <div class="list-item-title">帮助与反馈</div>
                <div class="list-item-desc">使用帮助和问题反馈</div>
              </div>
              <div class="list-item-right">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部提示区 -->
    <div class="dot-indicator">
      <div class="dot active"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
  
  <script>
    // 选项卡切换功能
    document.addEventListener('DOMContentLoaded', function() {
      const tabNavItems = document.querySelectorAll('.tab-nav-item');
      const tabContents = document.querySelectorAll('.tab-content');
      
      tabNavItems.forEach(item => {
        item.addEventListener('click', function() {
          // 移除所有活动状态
          tabNavItems.forEach(navItem => navItem.classList.remove('active'));
          tabContents.forEach(content => content.classList.add('hidden'));
          
          // 添加当前选中项的活动状态
          this.classList.add('active');
          const tabId = this.getAttribute('data-tab');
          document.getElementById(tabId).classList.remove('hidden');
        });
      });
    });
  </script>
</body>
</html> 